<!-- TODO(psimakov): use local YUI library -->
<link rel="stylesheet" type="text/css"
    href="/static/yui_3.6.0/yui/build/cssreset-context/cssreset-context-min.css">
<script
    src="/static/yui_3.6.0/yui/build/yui/yui.js"></script>
<link rel="stylesheet" type="text/css"
    href="/static/inputex-3.1.0/src/inputex/assets/skins/sam/inputex.css">
<script
    src="/static/inputex-3.1.0/src/loader.js" type='text/javascript'></script>
<script
    src="/static/inputex-3.1.0/lib/jsonPretty.js" type='text/javascript'></script>

<!-- TODO(psimakov): take styles out into a separate file -->
<style>
  div#oeditor-container {
    position: relative;
  }
  div.status-popup {
    width:400px;   /* adjust */
    left:50%;
    margin-left: -200px;  /* half of the width */
    background-color: #ffffB7;
    border: solid #cccca0 1px;
    border-radius: 5px;
    text-align: center;
    padding: 2px;
    z-index: 999;
  }
  .status-popup.fixed {
    position: fixed;
    top: 10px;
  }
  .status-popup.absolute {
    position: absolute;
    top: -45px;
  }
  div.status-controlbar {
    float: right;
  }
  div.status-controlbar button {
    font-weight: bold;
    text-decoration: none;
    padding: 0 0.2em;
  }
  div.status-message {
    padding: 0.2em;
  }

  div.form {
    width: 700px;
    margin: 20px;
    padding: 15px;
    display: none;
    text-align: left;
  }
  div#formContainer fieldset {
    border: none;
    border-top: solid 1px #999999;
    border-bottom: solid 1px #999999;
    margin-bottom: 16px;
  }
  div#formContainer fieldset legend span {
    color: #505050;
    font-weight: bold;
    padding: 4px;
  }
  div#formContainer fieldset fieldset {
    border-top: solid #eee 6px;
    border-bottom: none;
  }
  div#formContainer fieldset fieldset legend span {
    color: #777
  }
  div.split-from-main-group-parent {
    margin: 0 0 20px 70px !important;
  }

  div.inputEx-Field {
    width: 500px;
    padding-top: 0.2em;
    color: #000;
  }
  div.inputEx-Field textarea {
    width: 496px;
    max-width: 496px;
    height: 200px;
    border: solid 1px #999999;
    padding: 4px;
    border-left: 6px solid #999999;
    white-space: pre;
    word-wrap: normal;
    overflow: scroll;
  }
  div.inputEx-Field > select {
    max-width: 100%;
  }
  div.inputEx-StringField-wrapper input {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 2px;
    text-align: left;
    border: solid 1px #999999;
  }
  div.inputEx-Field input {
    width: 100%;
    border-left: 6px solid #999999;
  }
  div.inputEx-CheckBox input {
    width: auto;
  }
  div.inputEx-DateField {
    width: 480px;
  }

  div.inputex-form-buttonbar {
    margin: 0px;
    padding-left: 8px;
    padding-top: 18px;
    border-top: solid 1px #9999FF;
    text-align: center;
  }
  div.inputex-form-buttonbar a {
    text-decoration: none;
    padding: 4px;
    padding-left: 16px;
    padding-right: 16px;
    margin-right: 16px;
    font-weight: bold;
    color: #000000;
  }
  a.inputex-list-link {
    float: right;
  }
  a.inputEx-Button,
  div.inputEx-Button,
  div.inputEx-Field input.inputEx-Button {
    width: auto;
    background-color: #666;
    color: #FFFFFF;
    padding: 4px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 4px;
    margin-right: 4px;
    font-weight: bold;
    text-decoration: none;
    border: none;
  }

  .gcb-pull-right {
    float: right;
  }

  /* TODO(jorr): Rework this CSS to have clearer headers for nested properties */

  div#formContainer div.inputEx-ListField fieldset {
    border: none;
    min-width: 300px;
    margin-bottom: 0;
    -webkit-padding-before: 0;
    -webkit-padding-after: 0;
  }
  div#formContainer div.inputEx-ListField div.inputEx-label {
    width: auto;
  }
  div.inputEx-ListField-subFieldEl > fieldset > div.inputEx-fieldWrapper {
    white-space: nowrap;
  }
  div.inputEx-ListField-subFieldEl > fieldset > div.inputEx-fieldWrapper > div {
    float: none;
    display: inline;
    vertical-align: top;
  }
  div.inputEx-ListField-childContainer > div {
    white-space: nowrap;
    border-top: solid 1px #eee;
  }
  div.inputEx-ListField-Arrow {
    float: none;
    display: inline-block;
    float: right;
  }
  a.inputEx-List-link {
    display: none;
  }


  img.framed {
    border: 1px solid #ccc;
    padding: 3px;
    max-width: 400px;
  }

  /*
   * CSS for the lightbox used by the Rich Text Editor.
   */

  #modal-editor > .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 1000;
  }
  #modal-editor > iframe {
    position: fixed;
    top: 50%;
    height: 500px;
    margin-top: -250px;
    left: 50%;
    width: 780px;
    margin-left: -350px;
    z-index: 1001;
    background-color: #fff;
    border-radius: 10px;
    transition: height 500ms, margin-top 500ms;
    -webkit-transition: height 500ms, margin-top 500ms;
    -moz-transition: height 500ms, margin-top 500ms;
  }
  .hidden {
    display: none;
  }

  /*
   * CSS for the GCB Rich Text Editor.
   */

  textarea.raw-text-editor {
    width: 580px;
    height: 300px;
  }
  div.rte-control {
    margin-right: 35px;
    float:  right;
    cursor: pointer;
  }
  div.rte-control + div.inputEx-Field {
    /* Style the container for the textarea/RTE */
    clear: both;
    margin-left: 130px;
    margin-top: 5px;
  }
  .yui-toolbar-insertcustomtag > .yui-toolbar-icon{
    background: url() !important;
    left: 5px;
  }
  div.yui-toolbar-titlebar,
  div.dompath {
    /* Hide the top titlebar and bottom status bar on the RTE. */
    display: none;
  }
</style>

<div id='oeditor-container'>
  <div class='status-popup absolute' id='formStatusPopup' style='display: none;'>
    <div class='status-controlbar'>
      <button id='close-status-popup-button'>X</button>
    </div>
    <div class='status-message' id='formStatusMessage'></div>
  </div>
  <div style='width: 100%;' align='center' class='yui3-skin-sam yui-skin-sam'>
    <div class='form' id='formContainer'></div>
  </div>
</div>
<div id='modal-editor' class='hidden'>
  <div class='background'></div>
</div>

<script type='text/javascript'>
  (function() {
    //keep all our global objects here
    var cb_global = {};

    // various URL's needed by the form
    cb_global.get_url = '{{ get_url }}';
    cb_global.save_url = '{{ save_url }}';
    cb_global.save_args = JSON.parse("{{ save_args|js_string }}");
    cb_global.exit_button_caption = '{{ exit_button_caption }}';
    cb_global.exit_url = '{{ exit_url }}';
    cb_global.save_method = '{{ save_method }}';
    cb_global.auto_return = {% if auto_return %}true{% else %}false{% endif %};
    cb_global.bundle_lib_files = {% if bundle_lib_files %}true{% else %}false{% endif %};

    // If this value is '', deletions are not allowed
    cb_global.delete_url = '{{ delete_url }}';
    cb_global.delete_method = '{{ delete_method }}';

    // button captions
    cb_global.save_button_caption = '{{ save_button_caption }}'
    cb_global.custom_rte_tag_icons = JSON.parse("{{ custom_rte_tag_icons|js_string }}");

    cb_global.required_modules = [{% for module in required_modules %}
        '{{ module }}'{% if not loop.last %},{% endif %}{% endfor %}];
    cb_global.schema = JSON.parse("{{ schema|js_string }}");
    cb_global.type_label = '{{ type_label }}';
    cb_global.load_schema_with_annotations = function(schema) {
      {% for annotation in schema_annotations %}
        schema.root{% for element in annotation[0] %}['{{element}}']{% endfor %}
          = JSON.parse("{{ annotation[1]|js_string }}")
      {% endfor %}
    }
    cb_global.onFormLoad = function() {
      {% for file in extra_js_files %}
        {% include file %}
      {% endfor %}
    };

    {% include 'oeditor.js' %}
    {% include 'rte.js' %}
    {% include 'popup.js' %}

    onPageLoad(cb_global);
  })();
</script>

